import { useConfigCameraStore } from '@/stores/configCamera'
import { ElButton, ElDivider, ElTable, ElTableColumn } from 'element-plus'
import { defineComponent, Fragment } from 'vue'
import { useI18n } from 'vue-i18n'
import type { CameraData } from '../types'
import CameraForm from './CameraForm'

export default defineComponent({
  setup() {
    const { t } = useI18n()
    const configCameraStore = useConfigCameraStore()

    return () => (
      <Fragment>
        <ElButton size="large" onClick={configCameraStore.handleVisible}>
          {t('tian-jia')}
        </ElButton>
        <ElDivider></ElDivider>
        <ElTable data={configCameraStore.tableData}>
          {configCameraStore.columns.map((item) => (
            <ElTableColumn key={item.prop} prop={item.prop} label={item.label}>
              {{
                default: ({ row }: { row: CameraData }) => item.slot && item.slot(row)
              }}
            </ElTableColumn>
          ))}
        </ElTable>
        <CameraForm />
      </Fragment>
    )
  }
})
